<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <script src="../.common/dep/jquery.min.js"></script>
    <script src="../.common/dep/jquery.binarytransport.js"></script>

    <script src="../../dist/WMFJS.bundle.js"></script>

    <script>
function closeDoc(reset) {
    $("#content").empty();
    $("#dropzone").show();
    $("#closebutton").hide();
    $("#tools").hide();
    if (reset)
        $("#samplecombo").val("");
}
function beginLoading() {
    closeDoc(false);
    $("#dropzone").hide();
    $("#content").text("Loading...");
}
function setPictBorder(elem, show) {
    if (show)
        elem.css("border", "1pt dotted red")
    else
        elem.css("border", "none")
    return elem;
}
function validateNumberInputRange(input) {
    var ret = parseInt(input.val());
    if (isNaN(ret) || ret < input.attr("min") || ret > input.attr("max"))
        throw new WMFJS.Error("Invalid rendering dimensions");
    return ret;
}
function displayWMF(blob) {
    try {
        var width = validateNumberInputRange($("#renderwidth"));
        var height = validateNumberInputRange($("#renderheight"));
        var settings = {
            width: width + "px",
            height: height + "px",
            xExt: width,
            yExt: height,
            mapMode: 8 // preserve aspect ratio checkbox
        };
        var renderer = new WMFJS.Renderer(blob);
        var svg = setPictBorder($(renderer.render(settings)), $("#showpicborder").prop("checked"));
        $("#content").empty().append(svg.attr("class", "wmfpict"));
        $("#closebutton").show();
        $("#tools").show();
        console.log("All done!");
    } catch(e) {
        if (e instanceof WMFJS.Error) {
            $("#content").text("Error: " + e.message);
            throw e;
        }
        else {
            throw e;
        }
    }
}
function loadWmfFile(file) {
    beginLoading();
    $.ajax({
        url: file,
        dataType: "binary",
        processData: false,
        success: function(result) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                displayWMF(evt.target.result);
            };
            reader.readAsArrayBuffer(result);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $("#content").text("Error: " + errorThrown);
        }
    });
}
$(document).ready(function() {
    $("#closebutton").click(function() {
        closeDoc(true);
    });
    $("#samplecombo").change(function() {
        var file = $(this).val();
        if (file.length == 0) {
            closeDoc(true);
        } else {
            loadWmfFile('../.common/data/wmf/' + $(this).val());
        }
    });
    $("#showpicborder").change(function() {
        var show = $(this).prop("checked");
        $(".wmfpict").each(function() {
            setPictBorder($(this), show);
        });
    });
    $("#dropzone")
        .on("drop", function(evt) {
            evt.stopPropagation()
            evt.preventDefault();

            var files = evt.originalEvent.dataTransfer.files;
            if (files.length > 1) {
                alert("Please only drop one file!");
            } else {
                var reader = new FileReader();
                reader.onload = function(evt) {
                    beginLoading();
                    setTimeout(function() {
                        displayWMF(evt.target.result);
                    }, 100);
                };
                reader.readAsArrayBuffer(files[0]);
            }
        })
        .on("dragover", function(evt) {
            evt.stopPropagation()
            evt.preventDefault();
        });

    closeDoc(true);
});
    </script>
</head>
<body>
<div style="margin: 4pt;">
    <span>
        <form>
            <input id="closebutton" type="button" value="Close" style="display: none;"/>
            <select id="samplecombo">
                <option selected="selected" value="">Drag&amp;Drop a WMF image</option>
                <option>rtf.js.wmf</option>
            </select>
            Render as:
            <input id="renderwidth" type="number", min="1" max="1024" step="1" value="600"/> x <input id="renderheight" type="number", min="1" max="864" step="1" value="400"/>
        </form>
    </span>
    <span id="tools" style="display: none;">
        <label><input id="showpicborder" type="checkbox"/>Picture border</label>
    </span>
</div>
<div id="dropzone" style="display: inline-block; border-radius: 6pt; border: 2pt solid #dddddd; padding: 30pt;">
    Drop an WMF image here
</div>
<div id="content"></div>
</body>
</html>
